0
147
Views¿Cómo puedo borrar el error "El objeto no es válido como React Child" en react-native?
Componente principal--
import React from "react"; import {View,SafeAreaView,Text,StyleSheet} from 'react-native'; import TestComponent from "./Components/TestComponent"; const Test = () => { return ( <View> <Text>Here are some boxes of different colours</Text> <TestComponent color='#2aa198' name='Cyan' /> <TestComponent color='#268bd2' name='Blue' /> <TestComponent color='#d33682' name='Magenta' /> <TestComponent color='#cb4b16' name='Orange' /> </View> ); }; const styles = StyleSheet.create({ }); export default Test; Componente secundario: enter code here
import React from "react"; import {View,Text,StyleSheet} from 'react-native'; const TestComponent = ({color,name}) => { const colour = { backgroundColor:color, }; return ( <View style={colour}> <Text>{name}{colour}</Text> </View> ) }; const styles = StyleSheet.create({ mH:{ marginHorizontal:10 }, mV:{ marginVertical:5 }, height:{ height:30 } }); export default TestComponent;Cuando trato de usar color prop como objeto a la vista en la propiedad secundaria, recibo un error como "Los objetos no son válidos como React child (objeto encontrado con claves {backgroundColor} y también intenté usar colour.backgroundColor y aún así es no funciona y recibo el mismo error
·
Juan Pablo Isaza
1 answers
Answer question0
Pasa un objeto como hijo al componente Text . Supongo que desea mostrar el código de color como texto dentro del componente de texto. En lugar de pasar el objeto colour , simplemente pase color .
const TestComponent = ({color,name}) => { const colour = { backgroundColor:color, }; return ( <View style={colour}> <Text>{name}{color}</Text> </View> ) };Aquí hay un refrigerio de trabajo.
·
Juan Pablo Isaza
Report
Answer question